<template>
	<div>
		<el-form
			ref="form4"
			:model="form"
			:rules="rules"
			label-width="100px"
			label-position="top">
			<el-row :gutter="30">
				<el-col :span="24">
					<el-form-item
						label="新增合同模版"
						prop="newTemplateObj.value">
						<div>
							<el-select
								v-model="form.newTemplateObj"
								value-key="value"
								placeholder="请选择模版"
								style="width: 20%"
								:loading="loading"
								:disabled="state == 'readonly'">
								<el-option-group
									v-for="group in list"
									:key="group.label"
									:label="group.label"
									v-if="
										group.options &&
										group.options.length > 0
									">
									<el-option
										v-for="item in group.options"
										:key="item.value"
										:label="item.label"
										:value="item"></el-option>
								</el-option-group>
							</el-select>
							<el-button
								v-if="
									form.newTemplateObj &&
									form.newTemplateObj.value
								"
								style="margin-left: 15px"
								type="text"
								@click="goTemplateDetail">
								查看
							</el-button>
							<el-button
								v-if="
									form.newTemplateObj &&
									form.newTemplateObj.value &&
									type == 'preview'
								"
								style="margin-left: 15px"
								type="text"
								@click="downloadTemplate">
								下载
							</el-button>
						</div>
					</el-form-item>
				</el-col>
				<template
					v-if="
						form.newTemplateObj &&
						form.newTemplateObj.templateClassification > 1
					">
					<el-col :span="24">
						<el-form-item>
							<el-checkbox
								v-model="form.onlyThis"
								:true-label="1"
								:false-label="2"
								:disabled="state == 'readonly'">
								仅适用于此额度申请
							</el-checkbox>
						</el-form-item>
					</el-col>
					<el-col :span="24">
						<el-form-item label="使用客户">
							<div
								@click="chooseCustomer"
								class="flex-row-center">
								<el-input
									style="width: 20%"
									placeholder="请选择关联客户"
									v-model="form.customerNames"
									readonly
									:disabled="state == 'readonly'"></el-input>
								<el-button
									style="margin-left: 15px"
									type="text"
									:disabled="state == 'readonly'">
									管理客户
								</el-button>
							</div>
						</el-form-item>
					</el-col>
				</template>
				<el-col :span="24">
					<el-form-item label="说明" prop="remark">
						<el-input
							type="textarea"
							placeholder="请输入说明"
							v-model="form.remark"
							maxlength="500"
							:rows="5"
							show-word-limit
							:disabled="state == 'readonly'"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="24">
					<el-form-item label="附件" prop="annex">
						<image-common
							:up-type="2"
							v-model="form.annex"
							info="上传附件"
							:disabled="state == 'readonly'"></image-common>
					</el-form-item>
				</el-col>
			</el-row>
		</el-form>
		<select-customer
			ref="selectCustomer"
			:customer-ids="form.customerIds"
			@success="selectCustomerSuccess"></select-customer>
	</div>
</template>

<script>
	import SelectCustomer from '@/views/contractTemplate/components/SelectCustomer.vue';
	import { enablingOptionalTemplates } from '@/api/contractTemplate/templateUpdate';

	export default {
		components: { SelectCustomer },
		props: {
			customerId: {
				type: [String, Number],
				default: '',
			},
			applicationNo: {
				type: [String, Number],
				default: '',
			},
			planID: {
				required: false,
			},
			newOrOldCars: {
				required: false,
			},
			customerTypeCode: {
				required: false,
			},
			state: {
				required: false,
			},
			type: {
				required: false,
			},
		},
		data() {
			return {
				form: {
					newTemplateObj: null,
					remark: null,
					onlyThis: 2,
					customerIds: [],
					customerNames: '',
					annex: null,
				},
				rules: {
					'newTemplateObj.value': [
						{
							required: true,
							message: '请选择新合同模版',
							trigger: 'blur',
						},
					],
					remark: [
						{
							required: true,
							message: '请输入说明',
							trigger: 'blur',
						},
					],
				},
				list: [],
				loading: false,
			};
		},

		watch: {
			customerId: {
				handler(val) {
					if (this.notEmpty(val)) {
						this.getTemplateList();
					} else {
						this.list = [];
					}
				},
				immediate: true,
			},
			planID: {
				handler(val) {
					if (this.notEmpty(this.customerId)) {
						this.getTemplateList();
					}
				},
			},
			newOrOldCars: {
				handler(val) {
					if (this.notEmpty(this.customerId)) {
						this.getTemplateList();
					}
				},
			},
			customerTypeCode: {
				handler(val) {
					if (this.notEmpty(this.customerId)) {
						this.getTemplateList();
					}
				},
			},
		},
		methods: {
			downloadTemplate() {
				this.$emit('downTemplate', this.form?.newTemplateObj?.value);
			},
			initForm() {
				this.form = {
					newTemplateObj: null,
					remark: null,
					onlyThis: 2,
					customerIds: [],
					customerNames: '',
					annex: null,
				};
			},
			//获取其他生效合同模版
			getTemplateList() {
				this.loading = true;
				this.form.newTemplateObj = {
					contractTemplateId: '',
					contractTemplateCode: '',
					contractTemplateName: '',
					raw: {},
				};
				enablingOptionalTemplates({
					customerId: this.customerId,
					applicationNo: this.applicationNo,
					enablingStatus: 2,
					planId: this.planID,
					newOrOldCars: this.newOrOldCars,
					customerType: this.customerTypeCode,
				})
					.then(res => {
						this.list = res.data;
					})
					.finally(() => {
						this.loading = false;
					});
			},
			// 查看合同模版详情
			goTemplateDetail() {
				this.$emit(
					'getContractContent',
					this.form.newTemplateObj.value,
				);
			},
			//关联客户
			chooseCustomer() {
				this.$refs.selectCustomer.show();
			},
			//关联客户回调
			selectCustomerSuccess(customers) {
				if (customers && customers.length > 0) {
					let customerIds = [];
					let customerNames = [];
					customers.forEach(item => {
						customerIds.push(item.customerId);
						customerNames.push(item.customerName);
					});
					this.form.customerIds = customerIds;
					this.form.customerNames = customerNames.join(',');
				}
				console.log('当前选中的客户------', customers);
			},
			getForm() {
				return this.form;
			},
			saveForm(type) {
				let flag = false;

				if (type == 'save') {
					flag = true;
				} else {
					this.$refs['form4'].validate(valid => {
						if (valid) {
							flag = true;
						}
					});
				}
				if (flag) {
					return this.form;
				}
			},
		},
		mounted() {
			// this.getTemplateList()
		},
	};
</script>

<style lang="scss" scoped></style>
